<template>
	<view class="address-list-page" style="padding-top: 20rpx;">
		<uni-list :border="false" v-show="showTitle">
			<uni-list-item title="" clickable>
				<template v-slot:body>
					<view style="width: 100%;text-align: center;font-size: 18px;">
						<view>收货地址
							<view style="float: right;" @click="closeAddressList"> 
								<uni-icons type="closeempty" size="24"></uni-icons> 
							</view>
						</view>
					</view>					
				</template>				
			</uni-list-item>
			<uni-list-item title="" clickable v-show="showWeiXinAddr">
				<template v-slot:body>
					<view style="width: 100%;text-align: center;font-size: 14px;">
						<button type="primary" plain="true" @click="chooseAddressHandle" style="font-size: 16px; height: 30px;line-height: 30px;border: none; text-align: left; padding-left: 0px;"> 
							<uni-icons color="#1aad19;" type="weixin" size="20"></uni-icons>
							使用微信收货地址
						</button>
					</view>					
				</template>				
			</uni-list-item>
		</uni-list>		
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll" :style="{height: scrollerHeight + 'px',minHeight: minHeight + 'px'}"
			 @refresherpulling="onPulling"
			 :refresher-enabled="false">
			<uni-list class="address_list" >				
				<template v-if="listData && listData.length > 0">
					<uni-list-item v-for="item in listData" title="" :key="item.id" class="address-detail" direction="column" clickable showArrow @click="selectAddrHandle(item)">
						<template v-slot:header>
							<view class="slot-box">
								<text>{{item.name}}</text>
								<text style="margin-left: 20rpx;">{{item.mobile}}</text>	
							</view>											
						</template>
						<!-- 自定义 body -->
						<template v-slot:body>								
							<text class="main-text-color font28">{{item.detailAddress}}</text>
						</template>							
					</uni-list-item>
				</template>
			</uni-list>
		</scroll-view>	
			<uni-list :border="false" class="address-bottom">
				<uni-list-item title="" clickable style="width: 100%;">
					<template v-slot:body>
						<view class="add">
							<button class="add-address" style="border-radius: 200px;" type="warn" @click="goAddAddress">添加地址</button>
						</view>
					</template>	
				</uni-list-item>
			</uni-list>
	</view>
</template>

<script>
	
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	
	export default {
		props: {
			listData:{
				type: Array,
				default: () => {
					return []
				}
			},
			scrollerHeight: {
				type: [Number, String],
				default: 350
			},
			minHeight: {
				type: [Number, String],
				default: 350
			},
			choose: {
				type: Boolean,
				dufault: false
			},
			showTitle: {
				type: Boolean,
				dufault: true
			},
			showWeiXinAddr: {
				type: Boolean,
				dufault: false
			}
		},
		data () {
			return {
				phoneHeight:0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scrollerHeight1: this.scrollerHeight,
				currentAddress: {
					areaId:0,
					id: 0,
					name: '',
					mobile: '',
					areaName: '',
					detailAddress: '',
					defaultStatus: false
				},
				order: {},
				formData: {
					items: [],
					total: 0,
					totalMoney: 0,
					remark: '',
					addressId: null,
					deliveryType: 1,
					pointStatus: false
				},
				myAddrList: []
			}
		},
		onReady() {
			var height = 0;
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;	
					_this.scrollerHeight = res.windowHeight;
					_this.$nextTick(() => {
						let view = uni.createSelectorQuery().select("#head"); //局部滑块
						view.boundingClientRect(data => {
							if(data && data.height) {
								_this.topHeight = data.height;
								height = _this.phoneHeight - _this.topHeight - 144;							
								_this.scrollerHeight = height;
							}							
						}).exec();
					})
				},
			}); 
		},
		watch: {
		    // 父组件更新时同步数据
		    scrollerHeight(newVal) {
		      this.scrollerHeight1 = newVal
		    }
		  },
		computed: {
			
		},
		methods: {
			goAddAddress() {
				  uni.navigateTo({url: '/pages/my/add-address'})	
			},
			selectAddrHandle(e) {
			  this.currentAddress = {
									  areaId:  e.areaId,
									  id:  e.id,
									  mapAreaId: e.mapAreaId,
									  name: e.name,
									  areaName: e.areaName,
									  mobile: e.mobile,
									  detailAddress: e.detailAddress,
									  defaultStatus: e.defaultStatus
									}	
				this.$emit('selectAddress', this.currentAddress);
			},
			chooseAddressHandle() {
				  let _this = this;
				  uni.chooseAddress({
					success(res) {
					  _this.saveWeiXinAddress(res);
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: '获取微信地址失败',
							icon: 'none'
						});
					}
				  })
			},
			saveWeiXinAddress(res) {
				  let _this = this;
				  let city = [res.provinceName, res.cityName, res.countyName];
				  this.userDefaultAddr = res.provinceName + res.cityName + res.countyName + res.detailInfo;
				  let addressData = {
					name: res.userName,
					mobile: res.telNumber,
					areaId: res.postalCode +'',
					mapAreaId: res.postalCode,
					city: city,
					address: res.detailInfo,
					detailAddress: this.userDefaultAddr,
					defaultStatus: false
				  };				  
				  $H.post('/member/address/create', addressData).then(resp => {
					if(resp) {
						_this.currentAddress = {
								  areaId:  res.postalCode +'',
								  mapAreaId: res.postalCode,
								  id:  resp,
								  name: res.userName,
								  mobile: res.telNumber,
								  detailAddress: _this.userDefaultAddr,
								  defaultStatus: false,
								}
						_this.selectAddrHandle(_this.currentAddress);
					}
				  })					  
						 
			},
			closeAddressList() {
				this.$emit('closeAddresList');
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(111)
				this.$emit('loadMore');
			},
			scroll: function(e) {
				// console.log(2222)
				this.old.scrollTop = e.detail.scrollTop
			},
			chooseHandle(id) {
				this.$emit('chooseHandle', id);
			},
			onPulling() {
				this.$emit('onPullingHandle');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-list-page {
		width: 100%;
		height: 100%;
		min-height: 170rpx;
		.scroll-Y {
			height: 360rpx;
			min-height: 160rpx;
			margin-bottom: 140rpx;
			.address_list {
				height: 560rpx;
				overflow-y: scroll;
			}
		}			
	}
	.address-bottom {
		position: fixed;
		width: 750rpx;
		bottom: calc(env(safe-area-inset-bottom));
		left: 0;
		background: #fff;
		border-top: 1px solid #F4F4F4;
		padding: 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		.add {
			height: 90rpx;
			width: 690rpx;
			line-height: 90rpx;
			.add-address {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				color: #fff;
				background-color: #e64340;
			}
		}
	}	

</style>
